<!--饼图-->
<template>
    <div id="main" style="width:1000px;height:600px;margin: 10px auto;"></div>
</template>
<script>
    import request from "../utils/request";

    const echarts = require('echarts');

    export default {
        name: "Scatter",
        data () {
            return {
                search: '',
                currentPage: 1,
                pageSize: 200,
                total: 0,
                xyData: [],
                city: [],
                mean: []
            }
        },
        mounted(){
            this.initChart();
        },
        methods: {
            initChart() {

                var echarts = require('echarts');

                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;

                var data = {};
                // console.log(data);
                // console.log(data.selected)

                request.get("/salary",{ // 请求/wordCloud接口
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        search: this.search
                    }
                }).then(res=>{
                    console.log(res)

                    this.xyData=[]
                    this.city=[]
                    this.mean = []
                    // console.log(res.data.records.length)
                    for (var i=0;i<res.data.records.length;i++)
                    {
                        // this.data1[i]=res.data.records[i]['word']
                        // this.data2[i]=res.data.records[i]['frequency']
                        this.xyData.push([]);
                        var sum=0;
                        this.city.push(res.data.records[i].city);
                        var p = res.data.records[i]['points'];
                        // console.log(p);
                        for(var j=0;j<p.length;j++) {
                            this.xyData[i].push([p[j]['x'],p[j]['y']]);
                            sum+=p[j]['x'];
                        }
                        // console.log(sum)
                        sum=sum/p.length;
                        this.mean.push(sum);
                    }
                    // console.log(this.mean)
                    // console.log(this.city)
                    // console.log(this.xyData.length);
                    // console.log(this.xyData);
                    // console.log(this.xyData.length);
                    // console.log(this.xyData[0]);
                    // console.log(this.xyData[1]);
                    // console.log(this.xyData[2]);
                    // console.log(this.xyData[3]);
                    // console.log(this.xyData[4]);
                    // console.log(this.xyData[5]);


                    option = {
                        title: {
                            text: '各城市计算机专业薪资散点图',
                            subtext: '数据截止至: 2021.08.05'
                        },
                        grid: {
                            left: '3%',
                            right: '7%',
                            bottom: '7%',
                            containLabel: true
                        },
                        tooltip: {
                            // trigger: 'axis',
                            showDelay: 0,
                            formatter: function (params) {
                                if (params.value.length > 1) {
                                    return params.seriesName + ' :<br/>'
                                        + params.value[0] + '年 '
                                        + params.value[1] + '¥ ';
                                }
                                else {
                                    return params.seriesName + ' :<br/>'
                                        + params.name + ' : '
                                        + params.value + '¥ ';
                                }
                            },
                            axisPointer: {
                                show: true,
                                type: 'cross',
                                lineStyle: {
                                    type: 'dashed',
                                    width: 1
                                }
                            }
                        },
                        toolbox: {
                            feature: {
                                dataZoom: {},
                                brush: {
                                    type: ['rect', 'polygon', 'clear']
                                },
                                saveAsImage: {},
                            }
                        },
                        brush: {
                        },
                        legend: {
                            // data: ['Female', 'Male'],
                            data: this.city,
                            left: 'center',
                            bottom: 10
                        },
                        xAxis: [
                            {
                                type: 'value',
                                scale: true,
                                axisLabel: {
                                    formatter: '{value} 年'
                                },
                                splitLine: {
                                    show: false
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                scale: true,
                                axisLabel: {
                                    formatter: '{value} ¥'
                                },
                                splitLine: {
                                    show: false
                                }
                            }
                        ],
                        series: [
                            {
                                // name: 'Female',
                                name: this.city[0],
                                type: 'scatter',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: this.xyData[0],
                                markArea: {
                                    silent: true,
                                    itemStyle: {
                                        color: 'transparent',
                                        borderWidth: 1,
                                        borderType: 'dashed'
                                    },
                                    data: [[{
                                        name: this.city[0],
                                        xAxis: 'min',
                                        yAxis: 'min'
                                    }, {
                                        xAxis: 'max',
                                        yAxis: 'max'
                                    }]]
                                },
                                markPoint: {
                                    data: [
                                        {type: 'max', name: 'Max'},
                                        {type: 'min', name: 'Min'}
                                    ]
                                },
                                markLine: {
                                    lineStyle: {
                                        type: 'solid'
                                    },
                                    data: [
                                        {type: 'average', name: '平均值'},
                                        { xAxis: this.mean[0] }
                                    ]
                                }
                            },
                            {
                                name: this.city[1],
                                type: 'scatter',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: this.xyData[1],
                                markArea: {
                                    silent: true,
                                    itemStyle: {
                                        color: 'transparent',
                                        borderWidth: 1,
                                        borderType: 'dashed'
                                    },
                                    data: [[{
                                        name: this.city[1],
                                        xAxis: 'min',
                                        yAxis: 'min'
                                    }, {
                                        xAxis: 'max',
                                        yAxis: 'max'
                                    }]]
                                },
                                markPoint: {
                                    data: [
                                        {type: 'max', name: 'Max'},
                                        {type: 'min', name: 'Min'}
                                    ]
                                },
                                markLine: {
                                    lineStyle: {
                                        type: 'solid'
                                    },
                                    data: [
                                        {type: 'average', name: 'Average'},
                                        { xAxis: this.mean[1] }
                                    ]
                                }
                            },
                            {
                                name: this.city[2],
                                type: 'scatter',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: this.xyData[2],
                                markArea: {
                                    silent: true,
                                    itemStyle: {
                                        color: 'transparent',
                                        borderWidth: 1,
                                        borderType: 'dashed'
                                    },
                                    data: [[{
                                        name: this.city[2],
                                        xAxis: 'min',
                                        yAxis: 'min'
                                    }, {
                                        xAxis: 'max',
                                        yAxis: 'max'
                                    }]]
                                },
                                markPoint: {
                                    data: [
                                        {type: 'max', name: 'Max'},
                                        {type: 'min', name: 'Min'}
                                    ]
                                },
                                markLine: {
                                    lineStyle: {
                                        type: 'solid'
                                    },
                                    data: [
                                        {type: 'average', name: 'Average'},
                                        { xAxis: this.mean[2] }
                                    ]
                                }
                            },
                            {
                                name: this.city[3],
                                type: 'scatter',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: this.xyData[3],
                                markArea: {
                                    silent: true,
                                    itemStyle: {
                                        color: 'transparent',
                                        borderWidth: 1,
                                        borderType: 'dashed'
                                    },
                                    data: [[{
                                        name: this.city[3],
                                        xAxis: 'min',
                                        yAxis: 'min'
                                    }, {
                                        xAxis: 'max',
                                        yAxis: 'max'
                                    }]]
                                },
                                markPoint: {
                                    data: [
                                        {type: 'max', name: 'Max'},
                                        {type: 'min', name: 'Min'}
                                    ]
                                },
                                markLine: {
                                    lineStyle: {
                                        type: 'solid'
                                    },
                                    data: [
                                        {type: 'average', name: 'Average'},
                                        { xAxis: this.mean[3] }
                                    ]
                                }
                            },
                            {
                                name: this.city[4],
                                type: 'scatter',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: this.xyData[4],
                                markArea: {
                                    silent: true,
                                    itemStyle: {
                                        color: 'transparent',
                                        borderWidth: 1,
                                        borderType: 'dashed'
                                    },
                                    data: [[{
                                        name: this.city[4],
                                        xAxis: 'min',
                                        yAxis: 'min'
                                    }, {
                                        xAxis: 'max',
                                        yAxis: 'max'
                                    }]]
                                },
                                markPoint: {
                                    data: [
                                        {type: 'max', name: 'Max'},
                                        {type: 'min', name: 'Min'}
                                    ]
                                },
                                markLine: {
                                    lineStyle: {
                                        type: 'solid'
                                    },
                                    data: [
                                        {type: 'average', name: 'Average'},
                                        { xAxis: this.mean[4] }
                                    ]
                                }
                            },
                            {
                                name: this.city[5],
                                type: 'scatter',
                                emphasis: {
                                    focus: 'series'
                                },
                                data: this.xyData[5],
                                markArea: {
                                    silent: true,
                                    itemStyle: {
                                        color: 'transparent',
                                        borderWidth: 1,
                                        borderType: 'dashed'
                                    },
                                    data: [[{
                                        name: this.city[5],
                                        xAxis: 'min',
                                        yAxis: 'min'
                                    }, {
                                        xAxis: 'max',
                                        yAxis: 'max'
                                    }]]
                                },
                                markPoint: {
                                    data: [
                                        {type: 'max', name: 'Max'},
                                        {type: 'min', name: 'Min'}
                                    ]
                                },
                                markLine: {
                                    lineStyle: {
                                        type: 'solid'
                                    },
                                    data: [
                                        {type: 'average', name: 'Average'},
                                        { xAxis: this.mean[5] }
                                    ]
                                }
                            },
                        ]
                    };

                    option && myChart.setOption(option);

                })

            },
        }
    }
</script>

<style scoped>

</style>